<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script type="module">
    // import { computed, reactive, effect } from "/node_modules/@vue/reactivity/dist/reactivity.esm-browser.js";
    import { computed, reactive, effect } from "./reactivity.js"
    //  computed 计算属性
    // computed 执行的结果 是一个ref 不可被修改
    const state = reactive({
        name: "张三",
    });
    const aliasName = computed({
        get(oldValue) {
            console.log("computed", oldValue);
            return state.name + "123";
        },
        set(value) {
            console.log("set", value);
            // state.name = value;
        }
    });
    // 多次取值 只执行一次
    // console.log(aliasName.value);
    // console.log(aliasName.value);


    effect(() => {
        console.log(aliasName.value);
        console.log(aliasName.value);
    });
    state.name = "李四";

</script>

</html>